<html>
<head>

<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/jquery.mcdropdown.css"/>
<link rel="stylesheet" href="css/jquery.autocomplete.css"/>
<link rel="stylesheet" href="css/upload/style.css"/>
<link rel="stylesheet" href="css/onimage/jquery.onimage.css"/>

<script language="javascript" src="js/jquery.min.js"></script>
<script language="javascript" src="js/jquery.mcdropdown.js"></script>
<script language="javascript" src="js/jquery.autocomplete.js"></script>
<script language="javascript" src="js/on/jquery.onviewport.js"></script>
<script language="javascript" src="js/on/jquery.onimage.js"></script>
<script language="javascript" src="js/on/jquery.onimage.tools.js"></script>

<style>
	body {
		text-align: left;
	}
	
    .image-box {
        width: auto;
        height: auto;
    }

    .on-viewport {
        float: none;
        margin-top: inherit;
        border: 2px solid #DADADA;
        overflow: visible;
    }

    .on-layers {
        z-index: 200;
    }

    #form_tag {
        display: none;
        width: 500px;
        top: -84px;
        left: 9px;
        z-index: 400;
    }

    #form_tag form p {
        margin-bottom: 16px;
    }

    .info_tagger {

    }

    ul.fg-menu ul {
        /*height: 300px;*/
        overflow: auto;
    }

    .mcdropdown_menu {
        text-align: left;
    }

    .ac_results, #form_tag {
        text-align: left;
    }

    #form_tag p {
        margin: 0 0 8px;
    }

    div.mcdropdown {
        border: none;
    }

    ul.mcdropdown_autocomplete {
        border: 1px solid #ddd
    }

    #tag-category {
        width: 238px
    }

    .ac_results {
        border: 1px solid #ddd;
    }	
</style>


</head>

<body>


		<img id="outfit" style="position: relative" width="330" height="484" id="image" src="nature.jpg"/>


        <div id="form_tag" class="info_tagger">
            <div class="tail"></div>
            <div class="body">
                <div class="top"></div>
                <div class="in">
                    <div class="content">
                        <div class="close"><a id="button-close" href="#">close</a></div>
                        <div class="form">
                            <p>
								<input id="tag-brand-text" name="brand-text" type="text" value="Insert brand name"/>
								<input id="tag-brand" name="brand" type="hidden"/>
							</p>
                            <p>
                                
                                <input id="tag-category-text" type="text" name="category-text" value="What is it?" style="width: 228px"/>
                                <input id="tag-category" name="category" type="hidden"/>

                            </p>
                            <p><input id="tag-story" name="story" type="text" value="Description in 5 words maximum"/></p>
                            <br/>
                            <div class="fl">
                                <button class="pink-30" id="button-save-changes"><span>save changes</span></button>
                                <button class="grey-30" id="button-cancel"><span>cancel</span></button>
                            </div>
                            <div class="delete fr"><a href="">Delete this tag?</a></div>
							<div>
								<label for="tag-category-1">Category 1</label><input id="tag-category-1" type="checkbox" name="category[]" value="1"/><br/>
								<label for="tag-category-2">Category 2</label><input id="tag-category-2" type="checkbox" name="category[]" value="2"/><br/>
								<label for="tag-category-3">Category 3</label><input id="tag-category-3" type="checkbox" name="category[]" value="3"/><br/>
								<br/>
								<label for="tag-category-a">Category A</label><input id="tag-category-a" type="radio" name="category" value="A"/><br/>
								<label for="tag-category-b">Category B</label><input id="tag-category-b" type="radio" name="category" value="B"/><br/>
								<label for="tag-category-c">Category C</label><input id="tag-category-c" type="radio" name="category" value="C"/><br/>
								<br/>
								<select multiple="true" name="tag-select-1">
									<option value="X">X</option>
									<option value="Y">Y</option>
									<option value="Z">Z</option>
								</select>
							</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
        </div>
		
<ul id="categorymenu" class="mcdropdown_menu">	
    <li rel="category-clothes">Clothes
    <ul>
		<li rel="1">Item1</li>
    </ul>
    </li>

    <li rel="category-footwear">Footwear
    <ul>
        <li rel="2">Item2</li>
    </ul>
    </li>
    <li rel="category-accesories">Accesories
    <ul>
		<li rel="3">Item3</li>
    </ul>
    </li>
</ul>
		
<script>
(function($) {
    $form_tag = $('#form_tag');

    $('#button-save-changes').click(function() {
        
		$form_tag.find('input:text,input:hidden,input:password,input:checked,select,textarea').each(function() {
			$this = $(this);
			var item = {
				name: $this.attr('name'),
				id: $this.attr('id'),				
				val: $this.val()
			}
			console.log(item);			
		});
		
		$form_tag.hide();
    });

    $('#button-cancel').click(function() {
        $form_tag.hide();
    });

    $('#button-close').click(function() {
        $form_tag.hide();
        return false;
    });

    $('form').submit(function() {
        return false;
    });

    var i = 1;




    var handler = $('#outfit').onViewport();
    $viewport = handler.viewport();

    $viewport.bind('click', function(e) {
        var moved = false;
        //console.log('viewport click');
        var t0 = handler.event(e);
        //console.log(t0);
        //console.log(e);
        $marker = handler.addMarker({
            x: t0.click.cx,
            y: t0.click.cy,
            click: function(marker) {                
                $form_tag.hide();
                //console.log(1);
                //console.log($(marker));
                $(marker).append($form_tag);
                //$form_tag.slideDown().show();
                $form_tag.show();
            }
        });
        $marker.children().html(i++);

        //console.log(2);
        //console.log($marker);
        
        //$marker.append($form_tag);
        //$form_tag.show();

        return false;
    });

    var mcdd = null;
    var mcdd = $('#tag-category-text').mcDropdown("#categorymenu", {
        dropShadow: false,
        init: function(menu) {
            mcdd = this;
            //mcdd.setValue(2);
        }
    });
    

    var brands = [{id: 1, name: 'marca1'}, {id: 2, name: 'marca2'}, {id: 3, name: 'marca3'}];
    //var brands = ["Dolce & Gabana", "Rogan", "Target", "H&M", "Ankleboots", "Boemos"];

    var $brand_text = $('#tag-brand-text');
    var $brand = $('#tag-brand');
	
    $brand_text.autocomplete(brands, {
        matchContains: true,
        selectFirst: false,
        formatMatch: function(row, i, max) {
            return row.name;
        },
        formatResult: function(row) {
            return row.name;
            //return row.id;
        },
        formatItem: function(row, i, max) {
            //return i + "/" + max + ": \"" + row.name + "\" [" + row.id + "]";
            return row.name;
        }
    });

    $brand_text.result(function(event, data, formatted) {			
		
        if (data) $brand.val(data.id);
		else $brand.val('');
		
            //hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
    }).focus(function() {

        if ($(this).val() == 'Brand') $(this).val('');
        $(this).select();
    });

    //$("#whatisthis").mcDropdown("#categorymenu");

})(jQuery);
</script>	

</body>
</html>